<template>
  <Modal
    v-model="form.visible"
    :width="1000"
    :mask-closable="false"
    :loading="loading"
    :title="form.data.id ? '修改活动打卡点' : '新增活动打卡点'"
    ok-text="提交"
    @on-ok="ok">
    <Row class="mt30">
      <Col span="16" offset="4">
        <Form ref="form" :model="form.data" :rules="ruleValidate" :label-width="150">
          <FormItem prop="pkActGroup" label="组别">
            <Select
              v-model="form.data.pkActGroup"
              remote
              :remote-method="getActGroup"
              :loading="actGroupLoading">
              <Option v-for="(option, index) in actGroupList" :value="'' + option.pk_act_group" :key="index">{{option.group_name}}</Option>
            </Select>
          </FormItem>
          <FormItem prop="puncloName" label="打卡点名称">
            <Input v-model="form.data.puncloName" placeholder="请输入"></Input>
          </FormItem>
          <FormItem prop="puncloType" label="类别">
            <Select v-model="form.data.puncloType" placeholder="请选择类别">
              <Option
                v-for="item in actPuncloTypeList"
                :key="item.code"
                :value="item.code">{{ item.name }}</Option>
            </Select>
          </FormItem>
          <FormItem prop="puncloNo" label="打卡点序号">
            <Select v-model="form.data.puncloNo" placeholder="请选择打卡点序号">
              <Option
                v-for="item in actSortCodeList"
                :key="item.code"
                :value="item.code">{{ item.name }}</Option>
            </Select>
          </FormItem>
          <FormItem label="打卡时间">
            <Row>
              <Col span="24">
                <Row>
                  <Col span="11">
                    <FormItem prop="openTime">
                      <DatePicker type="datetime" style="width:100%" :options="options.openTime" placeholder="选择时间" v-model="form.data.openTime"></DatePicker>
                    </FormItem>
                  </Col>
                  <Col span="2" class="tc">-</Col>
                  <Col span="11">
                    <FormItem prop="closeTime">
                      <DatePicker type="datetime" style="width:100%" :options="options.closeTime" placeholder="选择时间" v-model="form.data.closeTime"></DatePicker>
                    </FormItem>
                  </Col>
                </Row>
              </Col>
            </Row>
          </FormItem>
          <FormItem prop="chargePerson" label="打卡点负责人">
            <Input v-model="form.data.chargePerson" placeholder="请输入"></Input>
          </FormItem>
          <FormItem prop="phone" label="负责人联系电话">
            <Input v-model="form.data.phone" placeholder="请输入"></Input>
          </FormItem>
          <FormItem prop="workers" label="打卡点工作人员">
            <Input v-model="form.data.workers" placeholder="请输入"></Input>
          </FormItem>
          <FormItem prop="phones" label="工作人员联系电话">
            <Input v-model="form.data.phones" placeholder="请输入"></Input>
          </FormItem>
          <FormItem prop="address" label="打卡点地址">
            <Input v-model="form.data.address" placeholder="请输入"></Input>
          </FormItem>
          <!-- <FormItem prop="ordinates" label="打卡点坐标">
            <Input v-model="form.data.ordinates" placeholder="请输入"></Input>
          </FormItem> -->
          <FormItem prop="puncloKm" label="打卡点公里数">
            <InputNumber :min="0" :max="9999" v-model.number="form.data.puncloKm" placeholder="请输入"></InputNumber>
          </FormItem>
          <FormItem prop="nextPuncloKm" label="下一个打卡点公里数">
            <InputNumber :min="0" :max="9999" v-model.number="form.data.nextPuncloKm" placeholder="请输入"></InputNumber>
          </FormItem>
          <FormItem prop="puncloPhoto" label="图片描述">
            <upload-img v-if="form.visible" @on-change="onUploadImg" :defaultImageList="defaultImageList"></upload-img>
          </FormItem>
          <FormItem prop="puncloMaterial" label="打卡点物资">
            <Input type="textarea" v-model="form.data.puncloMaterial" placeholder="请输入" :rows="4"></Input>
          </FormItem>
        </Form>
      </Col>
    </Row>
  </Modal>
</template>

<script>
  import Vue from 'vue'
  import { mapGetters } from 'vuex'
  import uploadImg from '@/components/upload-img'
  import activityApi from '@/api/activity'

  export default {
    name: 'update-modal',
    props: [
      'form'
    ],
    components: {
      uploadImg
    },
    data () {
      return {
        loading: true,
        actGroupLoading: false,
        actGroupList: [],
        ruleValidate: {
          pkActGroup: [
            { required: true, message: '请选择组别', trigger: 'change' }
          ],
          puncloName: [
            { required: true, message: '请输入打卡点名称', trigger: 'change' },
            { max: 50, message: '打卡点名称字符长度应小于50', trigger: 'change' }
          ],
          puncloType: [
            { required: true, type: 'number', message: '请选择类别', trigger: 'change' }
          ],
          puncloNo: [
            { required: true, type: 'number', message: '请选择打卡点序号', trigger: 'change' }
          ],
          openTime: [
            { required: true, type: 'date', message: '请选择开门时间', trigger: 'change' }
          ],
          closeTime: [
            { required: true, type: 'date', message: '请选择关门时间', trigger: 'change' }
          ],
          chargePerson: [
            { required: true, message: '请输入打卡点负责人', trigger: 'change' },
            { max: 50, message: '打卡点负责人字符长度应小于50', trigger: 'change' }
          ],
          phone: [
            { required: true, message: '请输入负责人联系电话', trigger: 'change' },
            { max: 50, message: '负责人联系电话字符长度应小于50', trigger: 'change' }
          ],
          workers: [
            { max: 100, message: '打卡点工作人员字符长度应小于100', trigger: 'change' }
          ],
          phones: [
            { max: 50, message: '工作人员联系电话字符长度应小于50', trigger: 'change' }
          ],
          address: [
            { required: true, message: '请输入打卡点地址', trigger: 'change' },
            { max: 50, message: '打卡点地址字符长度应小于50', trigger: 'change' }
          ],
          // ordinates: [
          //   { required: true, message: '请输入打卡点坐标', trigger: 'change' },
          //   { max: 100, message: '打卡点坐标字符长度应小于100', trigger: 'change' }
          // ],
          puncloKm: [
            { required: true, type: 'number', message: '请输入打卡点公里数', trigger: 'change' }
          ],
          nextPuncloKm: [
            { required: true, type: 'number', message: '请输入下一个打卡点公里数', trigger: 'change' }
          ],
          puncloPhoto: [
            { required: true, message: '请上传图片', trigger: 'change' }
          ],
          puncloMaterial: [
            { max: 100, message: '打卡点物资字符长度应小于100', trigger: 'change' }
          ]
        },
        options: {
          openTime: {},
          closeTime: {}
        }
      }
    },
    computed: {
      ...mapGetters({
        userInfo: 'userInfo',
        actPuncloTypeList: 'actPuncloTypeList',
        actSortCodeList: 'actSortCodeList'
      })
    },
    watch: {
      'form.visible': 'onClose',
      'form.data.openTime': function (val, oldVal) {
        this.options.closeTime.disabledDate = (date) => {
          let isDisabled = false
          if (this.form.data.openTime) {
            isDisabled = date && date.valueOf() < this.form.data.openTime.getTime()
          }
          return isDisabled
        }
      },
      'form.data.closeTime': function (val, oldVal) {
        this.options.openTime.disabledDate = (date) => {
          let isDisabled = false
          if (this.form.data.closeTime) {
            isDisabled = date && date.valueOf() > this.form.data.closeTime.getTime()
          }
          return isDisabled
        }
      }
    },
    methods: {
      ok () {
        this.$refs.form.validate((valid) => {
          if (valid) {
            this.submitForm()
          } else {
            this.$Message.error('表单验证失败，请检查输入内容!')
            this.form.visible = true
            this.loading = false
            setTimeout(() => {
              this.loading = true
            }, 100)
          }
        })
      },
      onClose (isVisible) {
        if (!isVisible) {
          this.$refs.form.resetFields()
        } else {
          this.getActGroup()
          this.defaultImageList = Vue.filter('splitImg')(this.form.data.puncloPhoto || '')
        }
      },
      onUploadImg (imgList) {
        this.form.data.puncloPhoto = imgList.filter((item) => {
          return item.name.length > 0
        }).map((item) => {
          if (item.response && item.response.responseData) {
            return item.response.responseData
          } else {
            return item.name
          }
        }).join(',')
        this.$refs.form.validateField('puncloPhoto')
      },
      async submitForm () {
        let activityId = this.$route.params.activityId
        this.form.data.pkActBaseInfo = activityId
        if (this.form.data.id) {
          const { body } = await activityApi.punchClock.update(this.form.data)
          if (this.$apiHelper.requestSuccessed(body.responseCode)) {
            this.$Message.info('修改成功')
            this.form.visible = false
            this.$emit('submit')
          } else {
            setTimeout(() => {
              this.$Modal.error({
                title: '错误',
                content: body.desc,
                onOk: () => {}
              })
              this.loading = false
            }, 500)
          }
        } else {
          const { body } = await activityApi.punchClock.create(this.form.data)
          if (this.$apiHelper.requestSuccessed(body.responseCode)) {
            this.$Message.info('保存成功')
            this.form.visible = false
            this.$emit('submit')
          } else {
            setTimeout(() => {
              this.$Modal.error({
                title: '错误',
                content: body.desc,
                onOk: () => {}
              })
              this.loading = false
            }, 500)
          }
        }
      },
      async getActGroup () {
        this.actGroupLoading = true
        const { body } = await activityApi.group.list({
          pk_act_base_info: this.$route.params.activityId,
          currentPage: 1,
          limit: 10
        })
        const { responseData } = body
        this.actGroupList = responseData.content
        this.actGroupLoading = false
      }
    },
    mounted () {
      this.$store.dispatch('getCode', 'act_sort')
      this.$store.dispatch('getCode', 'punclo_type')
      this.getActGroup()
    }
  }
</script>
